import React from 'react';
import { Divider, Row, Col, Radio, Button, Select, Input, InputNumber } from 'antd';
import config from "../../../../config/config";

const RAGTabPane = (props) => {

    const { themeColor, ollamaModels, selectModel, changeThemeColor, defaultThemeColor } = props;

    const modelOptions = ollamaModels.map(item => {
        let optionObj = new Object();
        optionObj.label = item.id;
        optionObj.value = item.id;
        optionObj.desc = item.id;
        return optionObj;
    });

    const distanceOptions = [
        { key: "COSINE", name: "余弦距离" },
        { key: "EUCLID", name: "欧氏距离" }
    ];

    const openCloseOptions = [
        { key: "open", name: "开启" },
        { key: "close", name: "关闭" }
    ];

    const retrieveModeOptions = [
        { key: "weight", name: "权重" },
        { key: "rrf", name: "RRF" }
    ];

    return (
        <div style={{ padding: "8px 20px 0px 10px", display: "block" }}>
            <i className="ri-t-shirt-line" style={{ padding: "0px 10px 0px 0px" }} />文本检索
            <Divider />
            <Row>
                <Col span={3}><i className="ri-list-settings-line" style={{ padding: "0px 10px 0px 0px" }} />模型选择</Col>
                <Col span={21}>
                    <Select
                        style={{ width: '50%' }}
                        placeholder={"选择模型"}
                        onChange={value => selectModel(value)}
                        options={modelOptions}
                    />
                </Col>
            </Row>
            <Row style={{ padding: "20px 0px 0px 0px" }}>
                <Col span={3}><i className="ri-link" style={{ padding: "0px 10px 0px 0px" }} />BaseUrl</Col>
                <Col span={21}>
                    <Input defaultValue={config.OLLAMA_MODEL_HOST} style={{ width: '50%' }} />
                </Col>
            </Row>
            <Row style={{ padding: "20px 0px 0px 0px" }}>
                <Col span={3}><i className="ri-key-line" style={{ padding: "0px 10px 0px 0px" }} />ApiKey</Col>
                <Col span={21}>
                    <Input style={{ width: '50%' }} />
                </Col>
            </Row>
            <Row style={{ padding: "20px 0px 0px 0px" }}>
                <Col span={3}><i className="ri-pin-distance-line" style={{ padding: "0px 10px 0px 0px" }} />距离度量</Col>
                <Col span={21}>
                    <Radio.Group value={themeColor} onChange={changeThemeColor}>
                        {
                            distanceOptions.map(item => <Radio value={item.key}>
                                <span style={{ padding: "0px 20px 0px 5px" }}>{item.name}</span>
                            </Radio>)
                        }
                    </Radio.Group>
                </Col>
            </Row>
            <Row style={{ padding: "20px 0px 0px 0px" }}>
                <Col span={3}><i className="ri-centos-line" style={{ padding: "0px 10px 0px 0px" }} />向量维度</Col>
                <Col span={21}>
                    <InputNumber min={0} max={100000} step={1} defaultValue={1024} style={{ width: '50%' }} />
                </Col>
            </Row>
            <Row style={{ padding: "20px 0px 0px 0px" }}>
                <Col span={8} style={{ display: "flex" }}>
                    <Col span={9}><i className="ri-remix-run-line" style={{ padding: "0px 10px 0px 0px" }} />混合检索</Col>
                    <Col span={14}>
                        <Radio.Group value={themeColor} onChange={changeThemeColor}>
                            {
                                openCloseOptions.map(item => <Radio value={item.key}>
                                    <span style={{ padding: "0px 20px 0px 5px" }}>{item.name}</span>
                                </Radio>)
                            }
                        </Radio.Group>
                    </Col>
                </Col>
                <Col span={12} style={{ display: "flex" }}>
                    <Col span={6}><i className="ri-store-line" style={{ padding: "0px 10px 0px 0px" }} />混合方式</Col>
                    <Col span={16}>
                        <Radio.Group value={themeColor} onChange={changeThemeColor}>
                            {
                                retrieveModeOptions.map(item => <Radio value={item.key}>
                                    <span style={{ padding: "0px 20px 0px 5px" }}>{item.name}</span>
                                </Radio>)
                            }
                        </Radio.Group>
                    </Col></Col>
            </Row>
            <Row style={{ padding: "20px 0px 0px 0px" }}>
                <Col span={3}><i className="ri-rhythm-line" style={{ padding: "0px 10px 0px 0px" }} />TopK</Col>
                <Col span={21}>
                    <InputNumber min={0} max={100} step={1} defaultValue={3} style={{ width: '50%' }} />
                </Col>
            </Row>
            <Row style={{ padding: "20px 0px 0px 0px" }}>
                <Col span={3}><i className="ri-save-3-line" style={{ padding: "0px 10px 0px 0px" }} />默认</Col>
                <Col span={21}>
                    <Button style={{ background: themeColor, width: "50%" }} onClick={() => defaultThemeColor()}>
                        <i className="ri-save-3-line" style={{ padding: "0px 10px 0px 0px" }} />恢复默认
                    </Button>
                </Col>
            </Row>
        </div>
    );
}

export default RAGTabPane;
